import React, { useState, useEffect } from "react";
import { toast, CopyToClipboard } from '@/utils/utils'
import { View, Text, Button } from '@tarojs/components'
import { fetchOrderDetail } from '@/server/order';
import { getCurrentInstance, useReachBottom } from '@tarojs/taro'
import InterTime from "@/components/InterTime";
import { loginData, backgroundObj, } from '@/utils/utils'
import Router from '@/utils/router';
import './index.scss'
const OrderDetail = (props) => {
    const { params } = getCurrentInstance().router

    const { orderSn } = params;
    const [data, setData] = useState({});
    const fetchData = () => {
        fetchOrderDetail({ orderSn }).then(val => {
            const { orderInfo } = val
            setData(orderInfo)
        })
    }
    useEffect(() => {
        fetchData()
    }, [])
    const {
        beanFee,
        createTime,
        orderDesc = "[]",
        payFee,
        realPayFee,
        totalFee = 0,
        refusedFlag,
        status,
        payTime,
        paySn,
        payType,
        refusedTime,
        refusedSn,
        orderType,
        expressRecord = '',
        goodsAmount
    } = data;
    let desc = JSON.parse(orderDesc) || [];
    const { goodsName, goodsCover } = desc
    const list = [
        { label: '订单编号', value: orderSn, type: 'coby' },
        { label: '下单时间', value: payTime },
        { label: '支付方式', value: '微信支付' },
        { label: '商品总额', value: '￥' + payFee },
    ]
    const orderStatus = {
        0: (
            <View className='OrderDetail_tools_price'>
                <View className='OrderDetail_tools_priceLabel'>
                    待支付：
                </View>
                <View className='OrderDetail_tools_priceIcon'>￥</View>
                <View className='OrderDetail_tools_pricecount'>
                    {payFee}
                </View>
            </View>
        ),
        1: (
            <View className='OrderDetail_tools_price'>
                <View className='OrderDetail_tools_priceLabel'>
                    实付
                </View>
                <View className='OrderDetail_tools_priceIcon'>￥</View>
                <View className='OrderDetail_tools_pricecount'>
                    {realPayFee}
                </View>
            </View>
        ),
        2: <View className='OrderDetail_tools_price'>
            <View className='OrderDetail_tools_priceLabel'>

            </View>
            <View className='OrderDetail_tools_pricecount'>
                {refusedFlag === "1" ? "已退款" : "交易已关闭"}
            </View>
        </View>,
        3: (
            <View className='OrderDetail_tools_price'>
                <View className='OrderDetail_tools_priceLabel'>
                    实付
                </View>
                <View className='OrderDetail_tools_priceIcon'>￥</View>
                <View className='OrderDetail_tools_pricecount'>
                    {realPayFee}
                </View>
            </View>
        ),
    }[status];

    const orderStatusTop = {
        0: (
            <>
                <View className='OrderDetail_status_box'>
                    <View className='OrderDetail_status_icon1'></View>
                    <View className='OrderDetail_status_font1'>等待付款</View>
                </View>
                <View className='OrderDetail_status_createTime'>
                    <View>需付款：￥{payFee}</View>
                    <View>剩余时间： <InterTime
                        fn={() => fetchData()}
                        times={createTime}
                    ></InterTime></View>
                </View>
            </>
        ),
        1: (
            <>
                <View className='OrderDetail_status_box'>
                    <View className='OrderDetail_status_icon2'></View>
                    <View className='OrderDetail_status_font2'>已付款</View>
                </View>
            </>
        ),
        2: <View className='OrderDetail_status_box'>
            <View className='OrderDetail_status_icon2'></View>
            <View className='OrderDetail_status_font2'>  {refusedFlag === "1" ? "已退款" : "交易已关闭"}</View>
        </View>,
        3: (
            <View className='OrderDetail_status_box'>
                <View className='OrderDetail_status_icon2'></View>
                <View className='OrderDetail_status_font2'>已完成</View>
            </View>
        ),
    }[status]
    return <View className='OrderDetail_box'>
        {orderStatusTop}
        {/* <View className='OrderDetail_address'>
            <View className='OrderDetail_icon_address'></View>
            <View className='OrderDetail_address_box'>
                <View className='OrderDetail_address_user'>
                    <View className='OrderDetail_address_username'>顾亨</View>
                    <View className='OrderDetail_address_mobile'>
                        184 0264 4555
                    </View>
                </View>
                <View className='OrderDetail_address_detail'>
                    地址：新疆维吾尔自治区博尔塔拉蒙古自治州温泉县团结大道534号
                </View>
            </View>
        </View> */}
        <View className='OrderDetail_shop'>
            <View style={backgroundObj(goodsCover)} className='OrderDetail_shop_profile'>

            </View>
            <View className='OrderDetail_shop_content'>
                <View className='OrderDetail_shop_title'>
                    {goodsName}
                </View>
            </View>
        </View>
        <View className='OrderDetail_tools'>
            {list.map(item => {
                const { label, value } = item
                if (item.type === 'coby') {
                    return <View className='OrderDetail_tools_list'>
                        <View className='OrderDetail_tools_listLeft'>{label}</View>
                        <View className='OrderDetail_tools_listRight'>
                            <View className="">
                                {value}
                            </View>
                            <View className="OrderDetail_tools_listRightLiner">

                            </View>

                            <View onClick={() => {
                                CopyToClipboard(value)
                            }} className="OrderDetail_tools_listCoby">
                                复制
                            </View>
                        </View>
                    </View>
                }
                return <View className='OrderDetail_tools_list'>
                    <View className='OrderDetail_tools_listLeft'>{label}</View>
                    <View className='OrderDetail_tools_listRight'>{value}</View>
                </View>
            })}
            <View className='OrderDetail_tools_liner'></View>
            {orderStatus}
        </View>
        {status === "0" && (
            <View className="OrderDetail_detail_fixed">
                <View onClick={() => {
                    Router('orderWeex', {
                        args: { orderSn }
                    })
                }} className='OrderDetail_detail_fixedBtn'>

                    <View className='OrderDetail_detail_btnRight'>
                        立即支付
                    </View>
                </View>
            </View>


        )}
    </View>
}
export default OrderDetail